<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MdiWin Demo - edit</title>
    <uieip type="file" value="inc" src="/yqwin/easyui/include.txt" cache="true" minute="1440"></uieip>
    <uieip type="file" value="css" src="/yqwin/css/yqwin.min" cache="false"></uieip>
    <uieip type="file" value="js" src="/yqwin/data/yqwin.min" cache="false"></uieip>

    <!-- 引入结束 -->
    <style>
        body {
            margin: 10px;
        }

        table {
            border-spacing: 0px;
        }
    </style>
</head>

<body>
    <h2>900 yqTextTitles</h2>
    <input id="tb" type="text" style="width:300px" />
    <p></p>
    <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:isedit2(true)">enable</a>
    <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:isedit2(false)">disable</a>

    <h2>900 yqUiMaskEdit</h2>
    <div id="div_titles">
    </div>
    <p></p>
    <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:getValue()">getValue</a>
    <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:dataClear()">clear</a>
    <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:setValue()">setValue</a>
    <input id="txt_width" value="800"></input>
    <input id="txt_height" value="400"></input>
    <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:reset()">reset</a>
    <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:destroy()">destroy</a>
    <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:isedit(true)">enable</a>
    <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:isedit(false)">disable</a>
    <script>
        $(function () {
            $("#div_titles").yqUiMaskEdit({
                width: 500,
                height: 400,
                ui_type: 2,  //ui类型
                value: {
                    default: "werwer"
                },
            });

            //----------------------------------
            $("#txt_width").numberspinner({
                width: 90,
                min: 100,
                max: 1000,
                label: "w",
                labelWidth: 18,
            })

            $("#txt_height").numberspinner({
                width: 130,
                min: 100,
                max: 1000,
                label: "h",
                labelWidth: 15,
                buttonText: "resize",
                onClickButton: function () {
                    $("#div_titles").yqUiMaskEdit("resize",
                        {
                            width: $("#txt_width").numberspinner("getValue"),
                            height: $("#txt_height").numberspinner("getValue")
                        });
                },
            })
            //----------------------------------
            $("#tb").yqTextUiMask({
                editModeW: 500, //模态编辑器宽度 格式为 800（数字）
                editModeH: 400, //模态编辑器高度 格式为 600（数字）
                value: {
                    default: "werwer"
                },
            });
        });

        var old_value = {};
        function getValue() {
            old_value = $("#div_titles").yqUiMaskEdit("getValue");
            console.log(old_value);
        }

        function dataClear() {
            $("#div_titles").yqUiMaskEdit("clear");
        };

        function setValue() {
            $("#div_titles").yqUiMaskEdit("setValue", old_value);
        }

        function reset() {
            $("#div_titles").yqUiMaskEdit({
                value: old_value
            });
        }

        function destroy() {
            $("#div_titles").yqUiMaskEdit("destroy");
        }

        function isedit(tf) {
            $("#div_titles").yqUiMaskEdit("isEdit", tf);
        }

        function isedit2(tf) {
            $("#tb").yqTextUiMask("isEdit", tf);
        }
    </script>
</body>

</html>